<template>
    <div class="body">
        <el-menu :default-active="activeIndex" background-color="#F5F6FA" active-text-color="#1795FF"
            text-color="#333333 " class="el-menu-demo" mode="horizontal">
            <el-menu-item @click="companylist(undefined)" index="0">所有</el-menu-item>
            <el-menu-item @click="companylist(1)" index="1">待申请</el-menu-item>
            <el-menu-item @click="companylist(2)" index="2">待审核</el-menu-item>
            <el-menu-item @click="companylist(3)" index="3">已通过</el-menu-item>
            <el-menu-item @click="companylist(4)" index="4">已拒绝</el-menu-item>
        </el-menu>

        <el-row class="mb8">
            <el-col :span="18">
                <el-button type="info" @click="shuaxin" icon="el-icon-refresh-right"></el-button>
                <el-button type="success" @click="handleAdd" >解保申请</el-button>
            </el-col>
            <el-col :span="6" class="seach">
                <el-input v-model="params.keywords" placeholder="请输入关键字"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="seach"></el-button>
            </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" class="table"
            @selection-change="handleSelectionChange" height="100%">
            <el-table-column align="center" type="selection" width="55"> </el-table-column>
            <el-table-column align="center" prop="applyNumber" label="申请编号" show-overflow-tooltip width="300">
            </el-table-column>
            <el-table-column align="center" prop="applyReason" label="申请事项" show-overflow-tooltip> </el-table-column>
            <el-table-column align="center" prop="guaranteeApplyNumber" label="解保保函编号" show-overflow-tooltip
                width="300">
            </el-table-column>
            <el-table-column align="center" prop="applyName" label="保函名称" show-overflow-tooltip width="120">
            </el-table-column>
            <el-table-column align="center" prop="handlerName" label="经办人" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="companyName" label="施工单位" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="businessName" label="业务人" width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="申请时间" width="180" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-show="scope.row.createTime == null"></span>
                    <span v-show="scope.row.createTime != null">{{ scope.row.createTime  }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                    <!-- 状态， 1：等待申请，2：等待审核，3：审核通过，4：审核拒绝 -->
                    <span v-show="scope.row.status == 1">等待申请</span>
                    <span v-show="scope.row.status == 2">等待审核</span>
                    <span v-show="scope.row.status == 3">审核通过</span>
                    <span v-show="scope.row.status == 4">审核拒绝</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="userCardname" label="发起人" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="updateTime" label="生效时间" show-overflow-tooltip width="180">
                <template slot-scope="scope">
                    <span v-show="scope.row.updateTime == null"></span>
                    <span v-show="scope.row.updateTime != null">{{ scope.row.updateTime  }}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="120" v-show="tabIndex == 1">
                <template slot-scope="scope">
                    <el-button v-show="scope.row.status == 1" size="mini" @click="jiebao(scope.row)">申请解保</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 解保申请 -->
        <el-dialog title="解保申请" :visible.sync="open" width="50%" :close-on-click-modal="false" v-dialogDrag
            custom-class="publicDialog">
            <el-form ref="form" :model="form" label-width="120px" class="">
                <el-form-item label="保函申请编号 :">
                    <el-input v-model="form.applyNumber"></el-input>
                </el-form-item>
                <el-form-item label="解保原因 :">
                    <el-input type="textarea" v-model="form.applyReason"></el-input>
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button type="" class="btn" @click="save">提交</el-button>
                <el-button type="" class="btn" @click="cancel">取消</el-button>
            </div>
        </el-dialog>

        <div class="block">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 20, 30]" :page-size="params.pageSize" :current-page="params.pageNum"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
import { lists, applys,listsAll } from "@/api/daihou.js";
export default {
    data() {
        return {
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            params: {
                pageNum: 1,
                pageSize: 10,
                keywords: "",
                status: undefined,
            },
            total: null,
            // 表单参数
            form: {
                applyNumber: '',
                applyReason: '',
            },
            // 表单校验
            rules: {},
            options1: [], //选择部门
            options2: [], //选择职位
            options3: [
                {
                    value: "HTML",
                    label: "HTML",
                },
                {
                    value: "CSS",
                    label: "CSS",
                },
                {
                    value: "JavaScript",
                    label: "JavaScript",
                },
            ], //选择小组
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            tableData: [],
            multipleSelection: [],
            zjList: '',
            hyList: '',
            tabIndex: 0,
            activeIndex:'0'
        };
    },
    created() {
        this.getList()
    },

    methods: {
        // 获取列表
        getList() {
            lists({ ...this.params }).then(res => {
                console.log(res.data);
                this.tableData = res.data.rows
                this.total = res.data.total
            })
        },
        // 获取列表 全部
        getListAll() {
            this.params.status = undefined
            listsAll({ ...this.params }).then(res => {
                console.log(res.data);
                this.tableData = res.data.rows
                this.total = res.data.total
            })
        },
        companylist(num) {
            this.tabIndex = num
            this.params.status = num
            this.params.pageNum = 1;
            this.params.pageSize = 10;
            this.getList();
        },
        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.params.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.params.pageNum  = val;
            this.getList();
        },
        // 搜索
        seach() {
            this.params.pageNum = 1;
            this.params.pageSize = 10;
            this.getList();
        },
        shuaxin() {
            this.params.pageNum = 1;
            this.params.pageSize = 10;
            this.getList();
        },
        handleAdd() {
            this.open = true
        },
        // 表单重置
        reset() {
            this.form = {
                applyNumber: '',
                applyReason: '',
            };
        },
        // 提交表单
        save() {
            applys({ ...this.form }).then(res => {
                console.log(res);
                if (res.data.code == 200) {
                    this.open = false
                    this.getList()
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.data.msg,
                    });
                }
            })
        },
        cancel() {
            // this.reset()
            this.open = false
        },
        handleSelectionChange() { },
        // 上传文件
        handleSuccessFile(file) {
            console.log(file.data);
            this.form.address = file.data
        }
    },
};
</script>
  
<style scoped lang="scss">
.body {
    height: calc(90vh - 60px);
    display: flex;
    flex-direction: column;
}

.table {
    width: 100%;
    // margin-top: 10px;
}

.block {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 0 !important;
    padding-bottom: 10px;
}
.el-menu--horizontal>.el-menu-item {
	height: 40px;
	line-height: 40px;
}

.el-menu.el-menu--horizontal {
	margin-bottom: 8px;
}
</style>
  